<html>
<head>
    <style>
        * {
            margin: auto;
            padding: 0;
        }
        table {
            width: 800px;
        }

        .label {
            text-align: right;
            width: 20%;
        }
        .content {
            text-align: left;
            width: 20%;
        }
        .content input {
            width: 100%;
        }
        .message {
            text-align: left;
            width: 60%;
        }
        .button {
            text-align: center;
        }

    </style>
    <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>
</head>
<body>
    <form action="{{ route('login') }}" method="post">
    <table>
        <tr>
            <td class="label">
                <span>用户名</span>
            </td>
            <td class="content" >
                <input type="text" name="phone" />
            </td>
            <td class="message" >
            </td>
        </tr>

        <tr>
            <td class="label">
                <span>密码</span>
            </td>
            <td class="content">
                <input type="password" name="password" />
            </td>
            <td class="message">
            </td>
        </tr>

        <tr>
            <td colspan="2" class="button">
                <button>登录</button>
            </td>
            <td></td>
        </tr>
    </table>
    </form>
</body>
<script>
    $(function () {

        $('.button').click(function () {
            var data = $("form").serialize()
            $.ajax({
                url: '{{ route('login') }}',
                method: 'post',
                data: data,
                success: function (data) {
                    console.log(data)
                },
                error: function (jqXHR, textStatus, errorThrown) {
                    data = $.parseJSON(jqXHR.responseText)
                    $.each(data, function (key, items) {
                        if(key === 'message'){
                            //alert(items)
                        }else{
                            $.each(items, function (name, err) {
                                // alert(name)
                                $("input[name="+name+"]").parent().siblings('.message').html(err)
                            })
                        }
                    })
                }
            })
            return false;
        })

    })
</script>
</html>
